<template>
  <div class="my_fee">
    <x-header :left-options="{showBack: true, backText: ''}" style="">我的党费</x-header>
    <v-scroll :on-infinite="infinite"  :on-refresh = "refresh" ref="my_scroller" :dataList="scrollData" id="myFeeId">
      <group v-for="(item, index) in items" :key="index" :title="(new Date(item.pay_time)).toLocaleString()">
        <cell :title="item.username" :value="'已缴纳'+ item.real_money +'元'" :inline-desc="item.department"></cell>
      </group>
    </v-scroll>
  </div>
</template>

<script>
import { XHeader, Group, Cell } from "vux";
import { mapGetters } from "vuex";
import VScroll from "../pull-refresh";

export default {
  mounted() {
    this.$nextTick(() => {
      this.box = this.$el.querySelector("#myFeeId");
      this.box.addEventListener("scroll", this.handler, false);
    });
  },
  name: "Fee",
  components: {
    XHeader,
    Group,
    Cell,
    VScroll
  },
  data() {
    return {
      page: 1,
      num: 10,
      scrollData: {
        noFlag: false //暂无更多数据显示
      },
      items: []
    };
  },
  methods: {
    handler() {
      this.box = document.querySelector("#myFeeId");
      this.$store.dispatch("updateMyFeePosition", this.box.scrollTop);
    },
    refresh(done) {
      this.$store.dispatch("getfeedetails", {
        card_no: this.$route.params.cardid
      });
      this.page = 1;
      done();
    },
    infinite(done) {
      this.page++;
      let end = this.num * this.page;
      let i = end - this.num;
      let more = this.$el.querySelector(".load-more");
      this.$store
        .dispatch("getfeedetails", {
          card_no: this.$route.params.cardid,
          page: this.page
        })
        .then(() => {
          for (i; i < end; i++) {
            if (i >= this.homeListTotal) {
              more.style.display = "none"; //隐藏加载条
              this.scrollData.noFlag = true;
              break;
            } else {
              more.style.display = "none"; //隐藏加载条
            }
          }
        });
      done();
    }
  },
  //计算属性
  computed: {
    ...mapGetters(["feeDetails","feeDetailsTotal","myFeeScrollTop"])
  },
  //触发事件
  created() {
    this.$store.dispatch("getfeedetails", {
      card_no: this.$route.params.cardid
    });
  },
  //侦听属性
  watch: {
    feeDetails: function(val) {
      this.items = val;
    },
    items: function(val) {
      if (this.feeDetailsTotal <= this.num || val.length >= this.feeDetailsTotal) {
        this.scrollData.noFlag = true;
      } else {
        this.scrollData.noFlag = false;
      }
    }
  }
};
</script>

<style lang="less">
.data {
  padding-top: 24/16rem;
  font-family: "SourceHanSansSC-Light", sans-serif;
  font-size: 14/16rem;
  color: rgb(102, 102, 102);
}
.vux-label-desc {
  font-family: "SourceHanSansSc-Regular", sans-serif;
  font-size: 13/16rem;
  color: rgb(153, 153, 153);
}
.weui-cell__ft {
  font-size: 14/16rem;
  color: rgb(102, 102, 102);
}

.my_fee {
  width: 100%;
  height: 100%;
  font-size: 0;
  background: rgb(245, 245, 249);
  position: relative;
  .weui-cells__title {
    font-size: 14/16rem;
    color: rgb(102, 102, 102);
  }
  .vux-label {
    font-size: 18/16rem;
  }
  .vux-label-desc {
    font-size: 13/16rem;
    color: rgb(102, 102, 102);
  }
  .weui-cell__ft {
    font-size: 13/16rem;
  }
}
</style>
